<template>
  <jxtech-upload-dialog
    v-model:visible="visibleModelValue"
    :busi-id="busiId"
    :comp-id="compId"
    :item-type="itemType"
    :projectid="projectid"
    :upload-method="JxtechUploadDialogExtState.uploadMethod"
    :access-token="JxtechUploadDialogExtState.accessToken"
    :parentid="parentid"
    :disabled="disabled"
    :with-credentials="withCredentials"
    :accept="accept"
    :thumbnail-mode="thumbnailMode"
    :limit="limit"
    @open="JxtechUploadDialogExtState.onOpen"
    @close="JxtechUploadDialogExtState.onClose"
    @upload-success="JxtechUploadDialogExtState.onUploadSuccess"
    @upload-error="JxtechUploadDialogExtState.onUploadError"
    @upload-preview="JxtechUploadDialogExtState.onUploadPreview"
    @upload-remove="JxtechUploadDialogExtState.onUploadRemove"
    @upload-progress="JxtechUploadDialogExtState.onUploadProgress"
  ></jxtech-upload-dialog>
</template>

<script setup lang="ts" name="JxtechUploadDialogExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechUploadDialog } from "@whjxtech/jxtech-component";
import type { uploadQueryParams } from "@whjxtech/jxtech-component";
import { saveUploadFileUrl } from "@/api/modules/org/file-attachment";
import { getAccessToken } from "@/utils/common";
import { uploadMinoFile } from "@/api/modules/system/upload-file";
import { uploadFile } from "@/api/modules/org/file-attachment";

interface JxtechUploadDialogExtProps {
  visible?: boolean;
  /**业务id */
  busiId: string;
  /**组件id */
  compId: string;
  /**业务类型 */
  itemType: string;
  /**电站id/项目id 可以不传但是建议传 */
  projectid?: string | number;
  /**父级id */
  parentid?: string | number;
  /**是否禁用 */
  disabled?: boolean;
  /**支持发送cookie凭证信息 */
  withCredentials?: boolean;
  /**支持上传文件类型 （thumbnail-mode 模式下此参数无效） */
  accept?: string;
  /**是否显示缩略图  */
  thumbnailMode?: boolean;
  /**最大上传数量 (files, fileList) */
  limit?: number;
}

const emit = defineEmits<{
  (e: "update:visible", val: boolean): void;
  /**Dialog 打开的回调 */
  (e: "open"): void;
  /**Dialog 关闭的回调 */
  (e: "close"): void;
  /**上传成功触发事件 */
  (e: "upload-success", _response: any, _file: any, _fileList: any): void;
  /**上传失败触发事件 */
  (e: "upload-error", _response: any, _file: any, _fileList: any): void;
  /**点击预览 */
  (e: "upload-preview", _file: any): void;
  /**移除触发事件 */
  (e: "upload-remove", _file: any, _fileList: any): void;
  /**文件上传时的钩子 */
  (e: "upload-progress", _event: any, _file: any, _fileList: any): void;
}>();

const props = withDefaults(defineProps<JxtechUploadDialogExtProps>(), {
  visible: false,
  projectid: "1",
  disabled: false,
  withCredentials: false,
  accept: "txt,png,ppt,pptx,doc,docx,war,zip,bmp,gif,jpg,jpeg,xls,xlsx,pdf,mov,mp4,json,tif,dwg",
  thumbnailMode: false,
  limit: 10
});

const MinioUploadState = reactive({
  uploadMethod: (file: File, setProgress: Function) => {
    return uploadMinoFile(file, setProgress);
  }
});

const JxudpUploadState = reactive({
  uploadMethod: (file: File, setProgress: Function, params: any) => {
    const formData = new FormData();
    formData.append("busiId", params.busiId);
    formData.append("compId", params.compId);
    formData.append("itemType", params.itemType);
    formData.append("projectid", params.projectid);
    formData.append("typeid", params.typeid);
    formData.append("files", file as File);
    return uploadFile(formData, setProgress, file.size);
  }
});

//双向绑定
const visibleModelValue = ref(props.visible);
watch(
  () => props.visible,
  val => {
    visibleModelValue.value = val;
  }
);
watch(visibleModelValue, val => {
  visibleModelValue.value = val;
  emit("update:visible", val);
});

const JxtechUploadDialogExtState = reactive({
  uploadMethod: (file: File, setProgress: Function, queryParams: uploadQueryParams) => {
    /**minio上传 */
    // return MinioUploadState.uploadMethod(file, setProgress);
    /**普通上传 */
    return JxudpUploadState.uploadMethod(file, setProgress, queryParams);
  },
  /**token */
  accessToken: getAccessToken() || "",
  onOpen: () => emit("open"),
  onClose: () => emit("close"),
  onUploadSuccess: (_response: any, _file: any, _fileList: any) => {
    emit("upload-success", _response, _file, _fileList);
  },
  onUploadError: (_response: any, _file: any, _fileList: any) => {
    emit("upload-error", _response, _file, _fileList);
  },
  onUploadPreview: (_file: any) => {
    emit("upload-preview", _file);
  },
  onUploadRemove: (_file: any, _fileList: any) => {
    emit("upload-remove", _file, _fileList);
  },
  onUploadProgress: (_event: any, _file: any, _fileList: any) => {
    emit("upload-progress", _event, _file, _fileList);
  }
});
</script>

<style lang="scss" scoped></style>
